<template>
  <div>
    <img src="/user-background.png" alt="" class="absolute bottom-0 object-cover w-full">
    <div class="flex flex-col items-center pl-48 p-8">
      <div class="relative">
        <img src="/ring.png" alt="" class="w-60 aspect-square">
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-lg">
          <span v-if="data">
            {{ data.name }}
          </span>
          <span v-else>
            未登录
          </span>
        </div>
      </div>
      <div class="bg-white backdrop-blur-md rounded-lg p-4 w-1/2 bg-opacity-60 flex-col flex gap-8">
        <div class="flex items-center gap-2 text-gray-500 text-2xl justify-between">
          <div class="flex">
            <Icon name="tabler:message" class="text-4xl mx-4" />
            <p>意见反馈</p>
          </div>
          <Icon name="tabler:chevron-right" class=" justify-self-end text-4xl" />
        </div>
        <div class="flex items-center gap-2 text-gray-500 text-2xl justify-between">
          <div class="flex">
            <Icon name="tabler:user-circle" class="text-4xl mx-4" />
            <p>关于我们</p>
          </div>
          <Icon name="tabler:chevron-right" class=" justify-self-end text-4xl" />
        </div>
        <div class="flex items-center gap-2 text-gray-500 text-2xl justify-between">
          <div class="flex">
            <Icon name="tabler:user-circle" class="text-4xl mx-4" />
            <p>福州大学女生</p>
          </div>
          <Icon name="tabler:chevron-right" class=" justify-self-end text-4xl" />
        </div>
      </div>
      <NuxtLink v-if="status !== 'authenticated'" to="/login?refresh=True" class="rounded-full text-[#F5A99F] bg-white mt-24 p-4 px-16 z-10">
        登录
      </NuxtLink>
      <button v-else class="rounded-full text-[#F5A99F] bg-white mt-24 p-4 px-16 z-10" @click="signOut({callbackUrl:'/login?refresh=True'})">
        退出
      </button>
    </div>
  </div>
</template>

<script setup>
const { status, signOut, data } = useAuth()
</script>
